<template>
  <div>
    <cube-scroll
      ref="scroll"
      :data="items"
      direction="horizontal"
      class="horizontal-scroll-list-wrap">
      <ul class="list-wrapper">
        <li v-for="item in items" class="list-item" :class="{'active': active === item.name}" :key="item.id" v-text="item.name" @click="getPicList(item, false, load().hide)"></li>
      </ul>
    </cube-scroll>

    <!-- 列表 -->
    <ul class="list">
      <li v-for="value in list" :key="value.url" tag="li">
        <img v-lazy="value.url" :alt="value.utag">
        <p v-text="value.utag"></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 分类
      items: null,
      // 选中
      active: null,
      // 列表
      list: [],
      // 从第几个获取多少个
      start: 10,
      count: 10,
      // 列表滚动更新，节流判断
      get: true
    }
  },
  methods: {
    // 获取图片分类
    getPicClas (callback = () => {}) {
      this.axios.get('/picture')
        .then(res => {
          this.items = res.data.calssify
          this.items.unshift({ name: '最新', id: '360new' })
          this.active = '最新'
          this.getPicList(this.items[0], false, callback)
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            let toast = this.$createToast({
              txt: '请求超时',
              type: 'txt'
            })
            toast.show()
          }
          callback()
        })
    },
    // 获取图片列表
    getPicList (item, add = false, callback = () => {}) {
      // 节流判断
      if (!this.get) {
        return
      }
      this.get = false
      // 选中样式
      this.active = item.name

      // 更新
      if (add) {
        this.axios.get('/picture', { params: { id: item.id, start: this.start, count: this.count } })
          .then(res => {
            this.list = this.list.concat(res.data)
            this.start += this.count
            this.get = true
          })
          .catch(err => {
            if (err.message.includes('timeout')) {
              let toast = this.$createToast({
                txt: '请求超时',
                type: 'txt'
              })
              toast.show()
              this.get = true
            }
          })
      // 覆盖
      } else {
        this.axios.get('/picture', { params: { id: item.id, start: 0, count: this.count } })
          .then(res => {
            this.list = res.data
            this.get = true
            callback()
          })
          .catch(err => {
            if (err.message.includes('timeout')) {
              let toast = this.$createToast({
                txt: '请求超时',
                type: 'txt'
              })
              toast.show()
              this.get = true
            }
            callback()
          })
      }
    },
    // 监听滚动距离，更新图片列表数据
    scrollUpdate () {
      window.onscroll = e => {
        if (document.body.scrollTop / document.body.scrollHeight > 0.6 || document.documentElement.scrollTop / document.body.scrollHeight > 0.6) {
          let item = this.items.find(value => value.name === this.active)
          this.getPicList(item, true)
        }
      }
    }
  },
  created () {
    this.getPicClas(this.load().hide)
  },
  mounted () {
    this.scrollUpdate()
  }
}
</script>

<style lang="stylus" scoped>
.horizontal-scroll-list-wrap
  border: 1px solid rgba(0, 0, 0, 0.1)
  border-radius: 5px
  >>> .cube-scroll-content
    display: inline-block
  .list-wrapper
    padding: 0 10px
    line-height: 60px
    white-space: nowrap
  .list-item
    margin 0 10px
    display: inline-block
  .active
    color blue
.list
  li
    width 96%
    margin 10px auto
    position relative
    box-shadow 1px 1px 14px -2px #000
    img
      width 100%
      vertical-align middle
    p
      position absolute
      bottom 0
      color #fff
      width 100%
      line-height 30px
      padding-left 10px
      background-color rgba(0, 0, 0, .4)
      font-size 14px
</style>
